<template>
  <div>
    <!-- 这个搜索框设计到了子组件改变父组件的数据 -->
    <searchFilter v-model:fitlet="params" />
    <el-table row-key="proid" :data="renderList" style="width: 100%">
      <el-table-column prop="proname" label="商品名称" width="180" />
      <el-table-column label="是否推荐" width="180">
        <template #default="{ row }">
          <el-switch
            :model-value="!!row.isrecommend"
            @change="handleSwitchChange(row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="count"
      v-model:page-size="limitNum"
      layout="total, sizes, prev, pager, next, jumper"
      :total="list.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import ProApiService from "@/api/pro.js";
import searchFilter from "./searchFilter.vue";
export default {
  name: "AppProFilterList",
  components: {
    searchFilter,
  },
  data() {
    return {
      list: [],
      count: 1,
      limitNum: 10,
      params: {
        category: "",
        search: "",
      },
    };
  },
  // !!监听只要我的params变化就要进行调用接口
  watch: {
    params() {
      this.getProList();
    },
  },
  computed: {
    // !!前端处理分页
    renderList() {
      return this.list.slice(
        (this.count - 1) * this.limitNum,
        this.count * this.limitNum
      );
    },
  },
  mounted() {
    this.getProList();
  },
  methods: {
    async getProList() {
      try {
        const res = await ProApiService.getProFiterListApi(this.params);
        this.list = res;
      } catch (error) {
        console.log(error, "---ee");
      }
    },
    // 更改推荐
    async handleSwitchChange(row) {
      try {
        await ProApiService.postProItemUpdateApi({
          proid: row.id,
          type: "isrecommend",
          flag: row.isrecommend ? 0 : 1,
        });
        this.getProList();
      } catch (error) {
        console.log(error, "---");
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
